<script setup>
import { useRoute } from 'vue-router';
import 'animate.css';

// 设置滚动状态
const scrolled = ref(false)
const isGZH = ref(false)
const isXCX = ref(false)
const onScroll = () => {
  scrolled.value = window.scrollY > 0;
}

onMounted(() => {
  window.addEventListener('scroll', onScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', onscroll)
})


// 页面数据
const pages = ref([
  { name: 'Home', to: '/' },
  { name: 'CourseVideo', to: '/VideoCourse' },
  { name: 'Performance', to: '/CoursePerformance' },
  { name: 'LingNan', to: '/lingnanCulture' },
  { name: 'About', to: '/AboutWenChuan' }

]);
const currentRoute = useRoute();

const props = defineProps({
  bgColor: {
    type: String,
    required: false,
    default: 'lightblue'
  }
})

const handleMouseEnter = ((val) => {
  val ? isXCX.value = true : isGZH.value = true
})

const handleMouseLeave = ((val) => {
  val ? isXCX.value = false : isGZH.value = false
})
</script>

<template>
  <footer :style="{ 'background-color': bgColor }">
    <img class="leftTong " src="https://kanekikeh.online/A/icon/smileTong.png">
    <img v-if="isGZH" src="https://kanekikeh.online/A/GZHQR.png" class="GZHQR animate__animated animate__fadeIn">

    <div class="d-flex flex-column justify-center align-center">
      <div class="logo d-flex flex-row justify-center align-center">
        <img src="https://kanekikeh.online/A/icon/wclogo.png" @mouseenter="handleMouseEnter(0)"
          @mouseleave="handleMouseLeave(0)">
        <img src="https://kanekikeh.online/A/icon/miniProgram.png" @mouseenter="handleMouseEnter(1)"
          @mouseleave="handleMouseLeave(1)">
      </div>
      <div class="linkGroup d-flex flex-row justify-center align-center">
        <!-- <a href="/">Home</a>
        <a href="/VideoCourse">CourseVideo</a>
        <a href="/AboutWenChuan">About</a>
        <a href="/CoursePerformance">Performance</a> -->
        <router-link v-for="page in pages" :key="page.name" :to="page.to"
          :class="{ 'router-link-active': currentRoute.path === page.to }">
          {{ page.name }}
        </router-link>
      </div>
      <div>This WebSite Was Made By Calvin & Kanekikeh & YLin In 2024</div>
    </div>
    <img v-if="isXCX" src="https://kanekikeh.online/A/studentWork/miniProgram/QRcode/NYKT.jpg"
      class="XCXQR animate__animated animate__fadeIn">
    <img class="rightTong" src="https://kanekikeh.online/A/icon/happyTong.png" alt="">
  </footer>
</template>



<style scoped lang="scss">
footer {
  width: 100vw;
  height: 20vh;
  margin-top: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  background-image: url('/src/assets/images/svg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 2;

  & div {
    font-size: 1em;
  }
}

.leftTong {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 15%;
  left: -3%;
  transform: rotate(30deg);
}

.rightTong {
  width: 140px;
  height: 150px;
  position: absolute;
  top: 14%;
  right: -1%;
  transform: rotate(330deg);
}

.logo {
  margin-top: 5px;

  & img {
    border-radius: 100%;
    width: 8%;
    height: 8%;
    cursor: pointer;

    &:nth-child(2) {
      margin-left: 20px;
    }
  }

  & img:hover {
    position: relative;
  }
}



.linkGroup {
  margin-top: 10px;
  margin-bottom: 10px;

  & a {
    margin-right: 15px;
    color: black;
    text-decoration: none;
    font-size: 0.9em !important;
    position: relative;
  }

  & a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1e90ff;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    transform-origin: right;
  }

  & a:hover {
    cursor: pointer;
    color: #1e90ff;
  }

  & a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.GZHQR {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 10%;
  left: 16%;
  border-radius: 10px;
  background-color: #98e4f4;
}

.XCXQR {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 10%;
  right: 16%;
  border-radius: 20px;
}
</style>